<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <base th:href="@{/}">
    <title>尚硅谷会员注册页面</title>
    <link type="text/css" rel="stylesheet" href="static/css/style.css"/>
    <link rel="stylesheet" href="static/css/register.css"/>
    <script src="static/script/vue.js"></script>
    <script src="static/script/axios.js"></script>
    <style type="text/css">
        .login_form {
            height: 420px;
            margin-top: 25px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="login_header">
            <a href="index.html">
                <img class="logo_img" alt="" src="static/img/logo.gif"/>
            </a>
        </div>

        <div class="login_banner">
            <div class="register_form">
                <h1>注册尚硅谷会员</h1>
                <!--<form action="regist_success.html" method="post">-->
                <form action="user?method=regist" method="post">
                    <div class="form-item">
                        <div>
                            <label>用户名称:</label>
                            <input type="text" placeholder="请输入用户名" name="username" v-model="user.username"
                                   @blur="checkUsername"/>
                        </div>
                        <span class="errMess" v-text="msg.usernameErrorMsg"></span>
                    </div>
                    <div class="form-item">
                        <div>
                            <label>用户密码:</label>
                            <input type="password" placeholder="请输入密码" name="pwd" v-model="user.password"
                                   @blur="checkPassword"/>
                        </div>
                        <span class="errMess" v-text="msg.passwordErrorMsg"></span>
                    </div>
                    <div class="form-item">
                        <div>
                            <label>确认密码:</label>
                            <input type="password" placeholder="请输入确认密码" v-model="user.password2"
                                   @blur="checkPassword2"/>
                        </div>
                        <span class="errMess" v-text="msg.passwordErrorMsg2"></span>
                    </div>
                    <div class="form-item">
                        <div>
                            <label>用户邮箱:</label>
                            <input type="text" placeholder="请输入邮箱" name="email" v-model="user.email"
                                   @blur="checkEmail"/>
                        </div>
                        <span class="errMess" v-text="msg.emailErrorMsg"></span>
                    </div>

                    <div class="form-item">
                        <div>
                            <label>验证码:</label>
                            <div class="verify">
                                <input type="text" placeholder="请输如验证码" v-model="code" @blur="checkCode"/>
                                <img :src="kaptchaImg" alt="" height="40px" width="110px" @click="changeCodeImg"/>
                            </div>
                        </div>
                        <span class="errMess" v-text="msg.codeMsg"></span>
                    </div>
                    <button class="btn" @click="regist">注册</button>
                </form>
            </div>
        </div>
        <div id="bottom">
				<span>
					尚硅谷书城.Copyright &copy;2015
				</span>
        </div>
    </div>

    <!-- 定义vue对象 -->
    <script type="text/javascript">
        const app = new Vue({
            el: "#app",
            data: {
                msg: {
                    usernameErrorMsg: "用户名应为6~16位数字和字母组成",
                    passwordErrorMsg: "密码的长度至少为8位",
                    passwordErrorMsg2: "密码两次输入不一致",
                    emailErrorMsg: "请输入正确的邮箱格式",
                    codeMsg: "请输入正确的验证码"
                },
                user: {
                    username: '',
                    password: '',
                    password2: '',
                    email: ''
                },
                //定义全局表单提交标识符
                flagArray: [0, 0, 0, 0],
                kaptchaImg: 'static/img/code.bmp',
                code:''
            },
            methods: {
                async checkUsername() {
                    //1.定义正则表达式语法
                    let usernameRege = /^[a-zA-Z0-9]{6,16}$/
                    let usernameFlag = usernameRege.test(this.user.usermame)
                    if (usernameFlag) {
                        // 2.校验用户是否存在
                        const {data} = await axios.get("/user", {
                            baseURL: 'http://localhost:8090/bookstore',
                            params: {
                                method: "checkUserName",
                                username: this.user.username
                            },
                        })
                        console.log(data);
                        data.flag ? this.msg.usernameErrorMsg = "√":this.msg.usernameErrorMsg = "用户名已存在!!!";
                        this.flagArray[0] = 1
                    } else {
                        this.msg.usernameErrorMsg = "用户名应为6~16位数字和字母组成"
                        this.flagArray[0] = 0
                    }
                },
                checkPassword() {
                    let passwordRege = /^.{8,}$/
                    let passwordFlag = passwordRege.test(this.user.password)
                    if (passwordFlag) {
                        this.msg.passwordErrorMsg = "√"
                        this.flagArray[1] = 1
                    } else {
                        this.msg.passwordErrorMsg = "密码的长度至少为8位"
                        this.flagArray[1] = 0
                    }
                },
                checkPassword2() {
                    if (this.user.password === this.user.password2) {
                        this.msg.passwordErrorMsg2 = "√"
                        this.flagArray[2] = 1
                    } else {
                        this.msg.passwordErrorMsg2 = "密码两次输入不一致"
                        this.flagArray[2] = 0
                    }
                },
                checkEmail() {
                    let emailRege = /^[a-zA-Z0-9_.-]+@([a-zA-Z0-9-]+[.]{1})+[a-zA-Z]+$/
                    if (emailRege.test(this.user.email)) {
                        this.msg.emailErrorMsg = '√'
                        this.flagArray[3] = 1
                    } else {
                        this.msg.emailErrorMsg = "请输入正确的邮箱格式"
                        this.flagArray[3] = 0
                    }
                },
                changeCodeImg(){
                    const baseUrl = 'http://localhost:8090/bookstore';
                    this.kaptchaImg = baseUrl+"/authCode?date="+new Date();

                },
                async checkCode(){
                  const {data} = await axios.get("user",{
                       baseURL: 'http://localhost:8090/bookstore',
                       params: {
                           method: 'checkAuthCode',
                           code: this.code
                       }
                   })
                    console.log(data);
                    if (data.flag){
                        this.msg.codeMsg = "√"
                        this.flagArray[4] = 1
                    }else {
                        this.msg.codeMsg = "验证码错误,请重新输入!!!"
                        this.flagArray[4] = 0
                    }
                },
                regist() {
                    //再次校验密码是否相同即可.
                    this.checkPassword2()
                    let flagStr = this.flagArray.join(",")
                    alert(flagStr)
                    if (flagStr !== "1,1,1,1,1") {
                        //应该阻止表单提交
                        event.preventDefault()
                        alert("表单校验不通过!!!")
                    } else {
                        alert("表单校验成功")
                    }

                }
            }
        })

    </script>
</body>
</html>
